<template>
    <div class="contentPage">
        <div class="pageTitle">资方列表</div>
        <Search :data="params.searchData" @search="getSearch"/>
        <div class="tableBox">
            <a-button type="primary" @click="addCustomer">
                <PlusOutlined/>
                新建项目
            </a-button>
            <a-table style="margin-top: 12px" :dataSource="params.dataSource" :columns="params.columns"
                     :row-selection="{ selectedRowKeys: params.selectedRowKeys, onChange: onSelectChange }" row-key="id"
                     :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'operation'">
                        <div style="display: flex;">
                            <div class="linkBtn" @click="edit(record,1)">编辑</div>
                            <div class="linkBtn" style="margin-left: 12px" @click="edit(record,2)">查看</div>
                            <a-popconfirm
                                placement="left"
                                :title="'确认通过?'"
                                ok-text="是"
                                cancel-text="否"
                                v-if="record.status === 0"
                                @confirm="confirmFreeze(record)"
                            >
                                <div class="linkBtn" style="margin-left: 12px">
                                    通过
                                </div>
                            </a-popconfirm>
                        </div>
                    </template>
                </template>
            </a-table>
            <a-pagination style="margin-top: 12px" show-size-changer v-model:current="params.page"
                          :total="params.total" @showSizeChange="onShowSizeChange" @change="onShowPageChange"/>
        </div>
        <a-modal v-model:open="params.visible" :title="params.editId ? '编辑项目' : '新建项目'" @ok="handleOk" destroyOnClose width="700px">
            <a-form
                :model="params.formState"
                name="basic"
                ref="formRef"
                style="margin-top: 24px"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 20 }"
                autocomplete="off"
            >
                <a-form-item label="项目名称" name="name" required>
                    <a-input v-model:value="params.formState.name"></a-input>
                </a-form-item>
                <a-form-item label="公司名称" name="companyName" required>
                    <a-input v-model:value="params.formState.companyName"></a-input>
                </a-form-item>
                <a-form-item label="营业执照" name="businessLicenseImage">
                    <Upload :value="params.formState.businessLicenseImage" @getImageUrl="e=>getImageUrl(e,'businessLicenseImage')"/>
                </a-form-item>
                <a-form-item label="实控人身份证" name="wonerIdcardImage">
                    <Upload type="file" :value="params.formState.wonerIdcardImage[0]" text="身份证正面" @getImageUrl="e=>getImageUrlArr(e,'wonerIdcardImage',0)"/>
                    <Upload :value="params.formState.wonerIdcardImage[1]" text="身份证反面" @getImageUrl="e=>getImageUrlArr(e,'wonerIdcardImage',1)"/>
                </a-form-item>
                <a-form-item label="实控人征信报告" name="wonerCreditImage">
                    <UploadFile :value="params.formState.wonerCreditImage" :saveName="true" @getImageUrl="e=>getFileUrl(e,'wonerCreditImage')" @removeImageUrl="e=>removeFileUrl(e,'wonerCreditImage')" />
                </a-form-item>
                <a-form-item label="法人身份证" name="userIdcardImage">
                    <Upload :value="params.formState.userIdcardImage[0]" text="身份证正面" @getImageUrl="e=>getImageUrlArr(e,'userIdcardImage',0)"/>
                    <Upload :value="params.formState.userIdcardImage[1]" text="身份证反面" @getImageUrl="e=>getImageUrlArr(e,'userIdcardImage',1)"/>
                </a-form-item>
                <a-form-item label="法人征信报告" name="userCreditImage">
                    <UploadFile :value="params.formState.userCreditImage" :saveName="true" @getImageUrl="e=>getFileUrl(e,'userCreditImage')"  @removeImageUrl="e=>removeFileUrl(e,'userCreditImage')" />
                </a-form-item>
                <a-form-item label="其它项目信息" name="otherFileUrl">
                    <div v-for="(item,index) in params.formState.otherFileUrl" :key="index" style="display: flex;align-items: flex-start;flex-wrap: wrap;justify-content: flex-start;margin-bottom: 12px">
                        <a-input v-model:value="item.fileText" placeholder="输入项目信息内容" style="width: 280px"></a-input>
                        <UploadFile style="width: 130px;margin: 0 12px" :value="item.file" :saveName="true" @getImageUrl="e=>getFileUrl(e,'otherFileUrl',index)"  @removeImageUrl="e=>removeFileUrl(e,'otherFileUrl',index)" />
                        <div class="linkBtn btnText" @click="addAndRemove(1,index)">添加</div>
                        <div class="linkBtn btnText" v-if="params.formState.otherFileUrl.length > 1" style="margin-left: 12px" @click="addAndRemove(2,index)">删除</div>
                    </div>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:open="params.lookVisible" title="查看项目" destroyOnClose width="600px" :footer="false">
            <LookDetail :data="params.lookData" />
        </a-modal>
    </div>
</template>
<script setup>
import {reactive, onMounted, ref} from 'vue'
import {PlusOutlined} from '@ant-design/icons-vue'
import {projectAdd, projectList, projectUpdate} from '../../../api/project.js'
import Search from '../../../components/search/index.vue'
import {message} from "ant-design-vue";
import Upload from "@/admin/components/upload/index.vue";
import UploadFile from "@/admin/components/uploadFile/index.vue";
import LookDetail from "@/admin/components/lookDetail/index.vue";


const formRef = ref(null)
const params = reactive({
    visible: false,
    lookVisible: false,
    lookData: [],
    editId: '',
    page: 1,
    pageSize: 10,
    total: 11,
    selectedRowKeys: [],
    formState: {
        wonerIdcardImage:[null,null],
        userIdcardImage: [null,null],
        otherFileUrl:[{fileText:'',file:[],name:''}]
    },
    searchData: [
        {name: '项目编号', type: 'input', val: '', key: 'projectNo'},
        {name: '项目名称', type: 'input', val: '', key: 'name'},
        {name: '新建时间', type: 'picker', val: [], key: ['createdAtLeft', 'createdAtRight']},
    ],
    searchVal: {},
    dataSource: [],
    columns: [
        {title: '项目编号', dataIndex: 'project_no', key: 'project_no'},
        {title: '项目名称', dataIndex: 'name', key: 'name'},
        {title: '公司名称', dataIndex: 'company_name', key: 'company_name'},
        {
            title: '状态', dataIndex: 'status', key: 'status', customRender: ({text, record}) => {
                return text === 0 ? '预审中' : text === 1 ? '项目运行中' : text === 2 ? '停止' : ''
            }
        },
        {title: '新建时间', dataIndex: 'created_at', key: 'created_at'},
        {title: '操作', dataIndex: 'operation', key: 'operation'},
    ],
    userList: [],
    regionList: [],
    pickUpList: [],
    groupList: [],
})
onMounted(() => {
    getList()
})
const onShowPageChange = (page) => {
    params.page = page
    getList()
}
const onShowSizeChange = (current, pageSize) => {
    params.pageSize = pageSize;
    getList()
}
const removeFileUrl = (e,key,index) => {
    if(index>=0){
        params.formState[key][index] = e
    }else{
        params.formState[key] = e
    }
}
const getFileUrl = (e,key,index) => {
    if(index>=0){
        if(!params.formState[key][index]) params.formState[key][index] = []
        params.formState[key][index].file = [e]
    }else{
        if(!params.formState[key]) params.formState[key] = []
        params.formState[key] = [e]
    }
}
const addAndRemove = (type,index) => {
    if(type === 1){
        params.formState.otherFileUrl.push({fileText:'',file:[],name:''})
    }else{
        params.formState.otherFileUrl.splice(index,1)
    }
}
const getImageUrlArr = (e,key,index) => {
    params.formState[key][index] = e
}
const getImageUrl = (e,key) => {
    params.formState[key] = e
}
const getList = () => {
    let data = {
        ...params.searchVal,
        page: params.page,
        pageSize: params.pageSize,
    }
    projectList(data).then(res => {
        params.dataSource = res.data.items
        params.total = res.data.total
    })
}
const openModal = () => {
    params.visible = true
}
const addCustomer = () => {
    params.editId = ''
    params.formState.companyName = ''
    params.formState.name = ''
    params.formState.businessLicenseImage = null
    params.formState.wonerIdcardImage = [null,null]
    params.formState.userIdcardImage = [null,null]
    params.formState.wonerCreditImage = []
    params.formState.userCreditImage = []
    params.formState.otherFileUrl = [{fileText:'',file:[],name:''}]
    openModal()
}
const onSelectChange = (selectedRowKeys) => {
    params.selectedRowKeys = selectedRowKeys;
};
const edit = (item, type) => {
    if(type === 2) {
        params.lookData = [
            {title:'项目名称',value: item.name, type: 1},
            {title:'公司名称',value: item.company_name, type: 1},
            {title:'营业执照',value: item.business_license_image, type: 2},
            {title:'实控人身份证',value: item.woner_idcard_image, type: 2},
            {title:'实控人征信报告',value: item.woner_credit_image, type: 3},
            {title:'法人身份证',value: item.user_idcard_image, type: 2},
            {title:'法人征信报告',value: item.user_credit_image, type: 3},
        ]
        if(item.other_file_url) {
            item.other_file_url.map(demo=>{
                params.lookData.push({title: demo.fileText,value: demo.file, type: 3},)
            })
        }
        return params.lookVisible = true
    }
    params.editId = item.id
    params.formState.companyName = item?.company_name
    params.formState.name = item.name
    params.formState.businessLicenseImage = item.business_license_image? item.business_license_image[0] : ''
    params.formState.wonerIdcardImage = item.woner_idcard_image || [null,null]
    params.formState.userIdcardImage = item.user_idcard_image || [null,null]
    params.formState.wonerCreditImage = item.woner_credit_image || []
    params.formState.userCreditImage = item.user_credit_image || []
    params.formState.otherFileUrl = item.other_file_url || [{fileText:'',file:[],name:''}]
    openModal()
}
const confirmFreeze = (record) =>{
    projectUpdate({ids:[record.id],status: 1}).then(res=>{
        if (res?.code === 200) {
            getList()
            message.success(res.message)
        } else {
            message.error(res.message)
        }
    })
}
const handleOk = () => {
    let config = JSON.parse(JSON.stringify(params.formState))
    config.businessLicenseImage = config.businessLicenseImage ?[config.businessLicenseImage] : []
    config.wonerIdcardImage = config.wonerIdcardImage || []
    config.wonerCreditImage = config.wonerCreditImage || []
    config.userIdcardImage = config.userIdcardImage || []
    config.userCreditImage = config.userCreditImage || []
    config.otherFileUrl = config.otherFileUrl || []
    formRef.value.validate().then(() => {
        if(params.editId) {
            config.id = params.editId
        }
        projectAdd(config).then(res => {
            if (res?.code === 200) {
                params.visible = false
                getList()
                message.success(res.message)
            } else {
                message.error(res.message)
            }
        })
    })

}
const getSearch = (e) => {
    params.searchVal = e
    getList()
}
</script>
<style scoped lang="less">
@import './style.less';
</style>
